<!DOCTYPE html>
<html>
<head>
    <title>Animate.js</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="Animate.js: A tiny vanilla JS plugin to trigger animations on elements when they are within the viewport">
    <link rel="stylesheet" type="text/css" href="assets/css/app.min.css?version=1.3.2">
    <link rel="stylesheet" type="text/css" href="assets/css/animate.css?version=1.3.2">
    <noscript>
        <style>.invisible { opacity: 1; }</style>
    </noscript>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <header data-animate data-animation-reverse="false" data-animation-remove="false" data-animation-classes="animated fadeIn">
            <a href="https://github.com/jshjohnson/animate" target="_blank" title="Go to repo">
                <img src="assets/images/logo.svg" class="logo" alt="Animate.js logo">
            </a>
        </header>
        <div class="box box--zero-top visible" data-animate data-animation-classes="animated tada"></div>
        <div class="box visible" data-animate data-animation-classes="animated shake"></div>
        <div class="box visible" data-animate data-animation-classes="animated jello"></div>
        <div class="box visible" data-animate data-animation-classes="animated wobble" data-animation-offset="0.5, 1"></div>
        <div class="box visible" data-animate data-animation-classes="animated rubberBand"></div>
        <div class="box visible" data-animate data-animation-classes="animated swing" data-animation-scrolled="true"></div>
        <footer class="push-top" alt="Animate.js logo">
            <a href="http://joshuajohnson.co.uk" class="text-center">joshuajohnson.co.uk</a>
        </footer>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
    <script src="assets/js/dist/animate.js?version=1.3.2"></script>
    <script>
        var animate = new Animate({
            target: '[data-animate]',
            animatedClass: 'visible',
            offset: [0.5, 0.5],
            delay: 0,
            remove: false,
            reverse: true,
            scrolled: false,
            debug: true,
            onLoad: true,
            onScroll: true,
            onResize: false,
            callbackOnInit: function() {
                console.log('Initialised');
            },
            callbackOnAnimate: function(element) {
                console.log(element)
            }
        });

        animate.init();
    </script>
    <!-- Google Analytics - Ignore me -->
    <script>
        window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
        ga('create', 'UA-31575166-1', 'auto');
        ga('send', 'pageview');
    </script>
    <script async src='https://www.google-analytics.com/analytics.js'></script>
    <!-- End Google Analytics -->
</body>
</html>
